<!--文件上传-->
<template>
  <div>
    <el-card class="box-card m-b-10">
      单击事件调用文件选择器：
      <el-button type="primary" @click="handleFileChoose1">选择图片</el-button>
      <file-choose ref="fileChoose1" emit-mode="uuid" type="img" :catalog="constants.FILE_CATALOG_EXAMPLE" @chooseResult="chooseResult" />

      <el-button type="primary" @click="handleFileChoose2">选择视频：</el-button>
      <file-choose ref="fileChoose2" type="video" @chooseResult="chooseResult" />

      <el-button type="primary" @click="handleFileChoose3">选择办公文件</el-button>
      <file-choose ref="fileChoose3" type="office" :limit="5" :catalog="constants.FILE_CATALOG_EXAMPLE" @chooseResult="chooseResult" />

      <el-button type="primary" @click="handleFileChoose4">选择文件</el-button>
      <file-choose ref="fileChoose4" :limit="4" :catalog="constants.FILE_CATALOG_WECHAT_ARTICLE_CONTENT" @chooseResult="chooseResult" />
    </el-card>
    <el-card class="box-card m-b-10">
      单击事件调用Uploader：
      <el-button type="primary" @click="handleUpload1">选择文件</el-button>
      <el-button type="primary" @click="handleUpload2">选择文件夹</el-button>
      <file-uploader ref="uploader1" :multiple="false" emit-mode="uuid" :catalog="constants.FILE_CATALOG_EXAMPLE" @uploadResult="uploadResult1" />
      <file-uploader ref="uploader2" :catalog="constants.FILE_CATALOG_EXAMPLE" @uploadResult="uploadResult1" />

    </el-card>
    <el-card class="box-card m-b-10">
      <div slot="header" class="clearfix">
        <span>文件上传</span>
      </div>
      选择文件(多选)：<SimpleUploader v-model="multiFiles" :catalog="constants.FILE_CATALOG_EXAMPLE" />
      拖拽上传(多选)：<SimpleUploader v-model="multiFiles" :catalog="constants.FILE_CATALOG_EXAMPLE" :drop="true" />
      选择文件及文件夹(多选)：<SimpleUploader v-model="multiFiles" :catalog="constants.FILE_CATALOG_EXAMPLE" :folder="true" />
      上传PDF(多选)：<SimpleUploader v-model="multiFiles" text="上传PDF" accept="application/pdf" :catalog="constants.FILE_CATALOG_EXAMPLE" @uploadResult="uploadResult" />
      上传PDF(单选)：<SimpleUploader v-model="singleFiles" :remove="false" :multiple="false" text="上传PDF" accept="application/pdf" :catalog="constants.FILE_CATALOG_EXAMPLE" @uploadResult="uploadResult" />
      单张图片裁剪(1:1)上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" />
      单张图片裁剪(3:2)上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" :crop-ratio="3 / 2" />
      单张图片上传:<SingleImageUpload v-model="file" :catalog="constants.FILE_CATALOG_EXAMPLE" :crop="false" desc="附加描述信息" :width="96" />
      多张图片裁剪(1:1)上传:
      <MultipleImageUpload v-model="multiImages" :catalog="constants.FILE_CATALOG_EXAMPLE" />
      多张图片裁剪(5:3)上传:<MultipleImageUpload v-model="multiImages" :crop-ratio="5 / 3" :catalog="constants.FILE_CATALOG_EXAMPLE" :width="108">
        <template slot="top-desc">
          《餐饮服务许可证》或者提供实体店铺的三张照片《包含：1.门头照含店名：2.店内全景照：3.店内收银台照)。<el-link type="primary" :underline="false" class="font12s">点击查看详情</el-link>
        </template>
      </MultipleImageUpload>

    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      singleFiles: [],
      multiFiles: ['a674562fc00847429484aa93c2cf801b', 'e5a92f18b7c5496db9d9edc1fa814611', 'e89b9b86a5164124a5bdcc32edc48804', '19cb7ffaa548415f8f8b1d223a9ef906', 'faee7e6b9e8e45b99b509fdfcdee92d6'],
      file: 'a674562fc00847429484aa93c2cf801b',
      multiImages: 'a674562fc00847429484aa93c2cf801b,e5a92f18b7c5496db9d9edc1fa814611,a674562fc00847429484aa93c2cf801b,e5a92f18b7c5496db9d9edc1fa814611,a674562fc00847429484aa93c2cf801b,e5a92f18b7c5496db9d9edc1fa814611'
    }
  },
  methods: {
    demo() {
      this.multiFiles = '2e70e085709040a3b136392e6de8530d'
    },
    uploadResult(files) {
      console.log(files)
      this.$modal.msgSuccess('文件上传成功回调：' + JSON.stringify(files))
    },
    handleUpload1() {
      this.$nextTick(() => {
        this.$refs.uploader1.openUploader({})
      })
    },
    handleUpload2() {
      this.$nextTick(() => {
        this.$refs.uploader2.openUploader({}, 'folder')
      })
    },
    uploadResult1(res) {
      this.$modal.msgSuccess('文件上传成功回调：' + JSON.stringify(res))
    },
    handleFileChoose1() {
      this.$nextTick(() => {
        this.$refs.fileChoose1.openChoose()
      })
    },
    handleFileChoose2() {
      this.$nextTick(() => {
        this.$refs.fileChoose2.openChoose()
      })
    },
    handleFileChoose3() {
      this.$nextTick(() => {
        this.$refs.fileChoose3.openChoose()
      })
    },
    handleFileChoose4() {
      this.$nextTick(() => {
        this.$refs.fileChoose4.openChoose()
      })
    },
    chooseResult(res) {
      this.$modal.msgSuccess('文件选择回调：' + JSON.stringify(res))
      console.log(res)
    }
  }

}
</script>
